import { Component } from 'react';
import {Boxs, SearchBar, ScrollList, Button, Toast, Dialog} from 'saltui';
const { HBox, Box } = Boxs;
import { URLS,nodataIcon } from '../../../app/variables';
import './PageHome.less';
const {
  ButtonGroup,
} = Button;

const ApplyBoardroomItem  =  React.createClass({
  setCheckBoxStatus : function (event) {
    let data = {};
    let radios = $(".select-boardroom-radio");
    let ct = $(event.currentTarget).find(".select-boardroom-radio");
    if(this.props.isCycle == 1){//是否选择周期会议室
      let cycleId = ct.attr("data-cycleid");
      let isChecked = ct.hasClass("checked");
      data = {
        id: isChecked ? "" : ct.attr("data-id"),
        boardroomId: isChecked ? "" : ct.attr("data-bdid"),
        boardroomName: isChecked ? "" : ct.attr("data-bdname"),
        cycleId: isChecked ? "" : cycleId,
        startTime: isChecked ? "" : ct.attr("data-starttime"),
        endTime: isChecked ? "" : ct.attr("data-endtime"),
      }
      //周期会议室，一次勾选当前周期会议
      for(let i = 0; i < radios.length; i++){
        if(isChecked){
          if($(radios[i]).attr("data-cycleid") == cycleId){
            $(radios[i]).removeClass("checked");
            $(radios[i]).addClass("un-checked");
          }
        }else{
          if($(radios[i]).attr("data-cycleid") == cycleId){
            $(radios[i]).removeClass("un-checked");
            $(radios[i]).addClass("checked");
          }else{
            $(radios[i]).removeClass("checked");
            $(radios[i]).addClass("un-checked");
          }
        }
      }
    }else{//选择普通会议室
      for(let i = 0; i < radios.length; i++){
        if($(radios[i]).hasClass("checked")){
          $(radios[i]).removeClass("checked");
          $(radios[i]).addClass("un-checked");
        }
      }
      ct.addClass("checked");
      data = {
        id: ct.attr("data-id"),
        boardroomId: ct.attr("data-bdid"),
        boardroomName: ct.attr("data-bdname"),
        cycleId: "",
        startTime: ct.attr("data-starttime"),
        endTime: ct.attr("data-endtime"),
      }
    }
    this.props.getBoardroomInfo(data);
  },
  render:function() {
       return <div onClick={this.setCheckBoxStatus.bind(this)}>         
        <HBox className="t-BCf t-P16 t-PR0 dd-bottom-border" vAlign="center" >
          <Box className={(this.props.isCycle == 0 && this.props.value == this.props.id) || (this.props.isCycle == 1 && this.props.selectCycleId == this.props.cycleId) 
            ? 't-checkbox-field-icon-list checked t-MR10 select-boardroom-radio t-list-cricle': 't-checkbox-field-icon-list un-checked t-MR10 select-boardroom-radio t-list-cricle'}
            data-id={this.props.id} 
            data-cycleid={this.props.cycleId}
            data-bdid={this.props.boardroomId} 
            data-bdname={this.props.boardroomName}
            data-starttime={this.props.start_time}
            data-endtime={this.props.end_time}
            >
            <i className="iconfont icon-checked t-FCf t-FS14"></i>
          </Box>
          <Box flex={1}>
            <div className="t-omit t-FC3 t-FS16 t-LH1_3 t-MR8">
              {this.props.boardroomName}
            </div>
            <HBox className="t-FCddfontblue-40 t-LH1_3 t-PT8 t-FS14" vAlign="center">
              <i className="iconfont icon-time t-MR4 t-FS14"></i>
              <span className="t-omit">{this.props.start_time}~{this.props.end_time}</span>
            </HBox>
          </Box>
        </HBox>           
      </div>
    }
 });

 export default class PageHome extends Component {
  
  constructor(props){
    super(props);
    Dialog.hide();
    //关闭加载页的遮罩效果
    $(".loading-containter").hide();
    //禁用ios弹性事件
    dd.ui.webViewBounce.disable();
    var winHeight = getScrollHigh(1, 1, hasBottomTab);
    let url = URLS.canUseBoardroomList;
    if(this.props.isCycleBoardroom == 1) 
      url += "&isCycle=1";
    this.state = {
      search:'',
      noDataTip:'暂无数据',
      winHeight:winHeight,
      data:{},
      url: url,
      isCycle: this.props.isCycleBoardroom
    };
  }

  componentDidMount(){
    searchBarLimit(20);
  }

  beforeFetch(data,from){
    if (from.title == undefined) {
      data.condition = this.state.search;
    } else {
      data.condition = from.title;
    }
    return data;
  }

  fetchData(param){
    this.refs.meeting_applyBoardroom_ref.fetchData({title:''});
  }

  //搜索
  onSearch(keyword) {
    this.setState({
      search:keyword,
      noDataTip:'无搜索结果'
    });
    this.refs.meeting_applyBoardroom_ref.fetchData({title:keyword});
  }

  //推出搜索
  onExit(keyword){
    this.setState({
      search:'',
      noDataTip:'暂无数据'
    });
    this.refs.meeting_applyBoardroom_ref.fetchData({title:''});
  }

  confirmFun(){
    let data = this.state.data;
    if(data && data.boardroomId){
      this.props.getBoardroomInfo(data);
    }else if(this.props.value){
      this.props.cancle();
    }else{
      Toast.show({
        type: 'error',
        content: '请先选择会议室'
      });
    }
  }

  render(){
    let t = this;
    let listHeight = {height: this.state.winHeight};
    return(
      <div>
        <SearchBar 
          hasHistory={false} 
          instantSearch={false} 
          onSearch={this.onSearch.bind(this)}  
          ref='applyBoardroom_search' 
          placeholder='请输入会议室名称' 
          onExit={this.onExit.bind(this)} />
        <div style={listHeight}>
          <ScrollList
            url={this.state.url}
            dataType="json"
            pageSize={10}
            beforeFetch={this.beforeFetch.bind(this)}
            noDataTip={this.state.noDataTip}
            processData={(data) => data}
            ref = 'meeting_applyBoardroom_ref'
            noDataImage={nodataIcon}
            scrollLoad={true}
            currentPageKey="page">
            <ApplyBoardroomItem value={this.props.value} isCycle={this.state.isCycle} selectCycleId={this.props.selectCycleId} getBoardroomInfo={(data)=>{t.setState({data:data})}}/>
          </ScrollList>
        </div>
        <div className="t-bottom-fixed"  style={{borderTop:0,bottom:'0',width:'100%'}}>
          <ButtonGroup>
            <Button type="primary" display="inline" onClick={() => {t.confirmFun();}}>确定</Button>
            <Button type="secondary" display="inline" onClick={() => { t.props.cancle(); } }>取消</Button>
          </ButtonGroup>
        </div>
      </div>
    )
  }
}